<template>
  <div class="work-space">
    <edit-header :actives="tarbarActives" @tarbar-action="tarbarAction" @submit="submit" />
    <div  :class="[isHidden ? 'cart-hidden': 'cart-auto', 'cart']" @drop="drop" @dragover.prevent>
      <div id="svg-box" ref="svgBox">
        <svg ref="svgContent" :width="spaceWidth" :height="spaceHeight" pointer-events="all" style="cursor: crosshair;">
          <g>
            <g :transform="`scale(${scale})`" @touchstart="touchstart"  @touchmove="touchmove" @touchend="touchend">
              <!-- 背景 -->
              <rect class="outer_background" :width="spaceWidth" :height="spaceHeight" fill="#fff" />
              <!-- 网格线 -->
              <flow-grid :spaceSize="spaceWidth" :gridSize="gridSize"></flow-grid>
              <!-- 图元组 -->
              <flow-group :scale="scale" :group="group"></flow-group>
            </g>
          </g>
        </svg>
      </div>
    </div>
    <footer>
      <div>
        edit
      </div>
      <div class="footer-buttons">
        <span>画布锁定</span>
        <el-switch v-model="isHidden" class="cart-switch" inline-prompt active-text="开" inactive-text="关"></el-switch>
        <el-button :icon="ZoomOut" @click="scale -= 0.1" />
        <el-button :icon="Rank" @click="scale = 1.0" />
        <el-button :icon="ZoomIn" @click="scale += 0.1" />
        <!-- <el-button class="mini" icon="el-icon-news" /> -->
        &nbsp;
      </div>
    </footer>
  </div>
</template>
<script setup>
import { FlowGrid, FlowGroup, EditHeader } from './components'
import { ElMessageBox, ElMessage } from 'element-plus'
import { reactive, ref, defineProps, computed, onMounted } from 'vue';
import { ZoomOut, ZoomIn, Rank } from '@element-plus/icons-vue'
import { covertSVG2Image } from '/@/utils/tools.js'
import { useRoute, useRouter } from 'vue-router'

const spaceWidth = ref(1000);
const spaceHeight = ref(1000);
const gridSize = ref(20);
const scale = ref(1);
const isHidden = ref(true)
const tarbarActives = reactive({
  delete: false
})
onMounted(()=>{
  // document.getElementById('svg-box').addEventListener('touchmove', e => {
  //   console.log(document.documentElement.scrollTop)
  // })
})
//
const svgContent = ref(null)
const svgBox = ref(null)
//
const router = useRouter()

const props = defineProps({
  group: Array
})
//
const group = props.group

const drop = function (event) {
  console.log(event)
  group.push(
    {
      x1: 300,
      y1: 300,
      x2: 400,
      y2: 300,
      x: 0,
      y: 0,
      id: `svg_${group.length + 1}`,
      rotate: 0,
      checked: false
    }
  )
}
let startEdi = {}
// start
const touchstart = function (e) {
  //
  let touch = e.touches[0];
  startEdi = {
    x: touch.clientX,
    y: touch.clientY
  }
  //
  let l = group.filter(e => e.checked)
  if (l.length >= 1) {
    startEdi.ox = l[0].x
    startEdi.oy = l[0].y
  }
  e.stopPropagation()
}
// top-menu
function tarbarAction(name) {
  if (name === 'delete') {
    let i = group.findIndex(e => e.checked)
    if (i != -1) {
      ElMessageBox.confirm(
        '确认删除此节点?',
        'Warning',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          group.splice(i, 1)
          tarbarActives.delete = false
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消',
          })
        })
    }
  }
}
// move
const touchmove = function (e) {
  e.stopPropagation()
  //
  let l = group.filter(e => e.checked)
  let touch = e.touches[0];
  if (l.length >= 1) {
    e.preventDefault()
    l[0].x = touch.clientX - startEdi.x + startEdi.ox
    l[0].y = touch.clientY - startEdi.y + startEdi.oy
  }
}
// end
const touchend = function (e) {
  // console.log(e)
  let nodeID = e.target.id
  let nodeNmae = e.target.localName
  if (nodeID) {
    // isLine
    if (nodeNmae === 'line') {
      //
      group.forEach(e => {
        if (e.id !== nodeID) {
          e.checked = false
        } else {
          e.checked = true
          tarbarActives.delete = true
        }
      })
    }
  } else {
    group.forEach(e => {
      e.checked = false
      tarbarActives.delete = false
    })
  }
  e.stopPropagation()
}

const submit = function () {
  //
  let node = svgContent.value;
  let serializer = new XMLSerializer()
  let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(node)
  // let image = new Image()
  const src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
  //
  router.push({
    name: 'sampeol',
    params: {
      src: src
    }
  })
}
</script>
<style lang="scss" scoped>
.work-space {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  .cart {
    background: #e3e3e3;
    position: absolute;
    bottom: 33px;
    top: 35px;
    left: 0px;
    right: 0px;
    box-sizing: border-box;
    transition: right 0.2s ease;
    #svg-box{
      width: 1000px;
      height: 1000px;
    }
  }
  .cart-hidden {
    overflow: hidden;
  }
  .cart-auto {
    overflow: auto;
  }
}
footer {
  border-top: 1px solid #bbbbbb;
  background: #fafafa;
  text-align: right;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 33px;
  line-height: 33px;
  padding: 0 10px;
  user-select: none;
  .cart-switch {
    margin: 0 15px;
  }

  .button-group:not(:last-child) {
    margin-right: 5px;
  }

  display: flex;
  justify-content: space-between;
  .footer-buttons {
    .mini {
      padding: 2px 2px;
      margin-left: 5px;
    }
  }
  .breadcrumb {
    line-height: 24px;
  }
}
</style>